<template>
	<view class="content">
		<!-- F1：两个下拉菜单 -->
		<!-- uni-app高仿微信小程序提供了一个下拉组件(数据拾取器)：picker -->
		<view class="f1">
			<!-- 第一个：缴费类型拾取器  ——  mode="selector"普通选择器 -->
			<picker mode="selector" :range="feeTypes" @change="doFeeTypeChange">
				<view class="picker-content">
					<text>{{feeTypes[typeIndex]}}</text>
					<uni-icons type="bottom"/>
				</view>
			</picker>
			
			<!-- 第二个：缴费年月拾取器 -->	
			<!-- fields：字段，表示可选的日期粒度，如年、年月、年月日 -->
			<!-- start：日期选择范围的开始时间 -->
			<!-- end：日期选择范围的结束时间 -->
			<picker mode="date" fields="month" start="1949-01" end="2100-12" @change="doFeeDateChange">
				<view class="picker-content">
					<text>{{feeDate?feeDate:'缴费日期'}}</text>
				</view>
			</picker>			
		</view>
		
		<!-- F2：缴费记录组成的卡片列表	-->
		<uni-card v-for="(f,i) in feeList" :key="i" thumbnail="../../static/img/shui.png">
			<!-- 卡片的标题部分（插槽） -->
			<template v-slot:title>
				<image class="card-icon" :src="`../../static/img/${feeTypeIcons[f.type]}`" mode="widthFix"/>
			</template>
			<!-- 卡片的主体部分 -->
			<view class="card-content">
				<uni-list class="card-content-list">
					<uni-list-item :title="feeTypes[f.type]" :right-text="'￥'+f.amount.toFixed(2)"/>
					<uni-list-item class="card-content-list-item" title="缴费状态" right-text="交易成功"/>
					<uni-list-item class="card-content-list-item" title="缴费用户" :right-text="f.householdId"/>
					<uni-list-item class="card-content-list-item" title="缴费时间" :right-text="formatDate(f.paidTime)"/>
				</uni-list>
			</view>
		</uni-card>
	</view>
</template>

<script>
import { feeRecord } from '@/service'
import { formatDate, feeTypes, feeTypeIcons } from '@/util'
	export default {
		data() {
			return {
				formatDate,	//把工具方法上升为data变量
				feeTypes, //把工具变量上升为data变量
				feeTypeIcons, //把工具变量上升为data变量
				typeIndex: 0, //用户当前选中的“缴费类型”下标
				feeDate: '',  //缴费日期
				feeList: [],	//缴费记录列表 
			}
		},
		async onLoad(){
			//页面加载时，异步请求当前用户的缴费记录     
			let data= await feeRecord(this.typeIndex)
			// console.log(data)
			///TODO:此处如果验证出用户没有登录，需要跳转到登录页
			this.feeList = data
		},
		methods: {
			doFeeTypeChange(e){	//处理“缴费类型”下拉菜单选项改变事件
				// console.log('用户的选项：', e.detail.value)		//value就是用户选中的那一项的下标
				if(this.typeIndex === e.detail.value){
					return  //如果当前选项和用户的最新选项一样，则不发服务器端请求
				}
				this.typeIndex = e.detail.value
				this.requestFeeList()			//此方法虽然是异步的(async)，但是没有返回值，故无需等待(await)执行结束
			},
			doFeeDateChange(e){ //处理“缴费日期”改变事件
				if(this.feeDate === e.detail.value){
					return
				}
				this.feeDate = e.detail.value
				this.requestFeeList()		 //此方法虽然是异步的(async)，但是没有返回值，故无需等待(await)执行结束
			},
			async requestFeeList(){
				//根据当前最新选项异步请求服务器端接口数据
				let startTime = 0		//选中月份的开始时间戳
				let endTime = 0 		//选中月份的结束时间戳
				if(this.feeDate){		//判断用户是否选择了某个月份，形如：'2023-06'
					startTime = new Date(this.feeDate).getTime() - 1000*3600*8		//获取指定月份的开始时间
					let  arr = this.feeDate.split('-')		//arr: ['2023', '06']
					endTime = new Date(arr[0], arr[1]).getTime() - 1							//获取指定月份的结束时间
				}
				let data = await feeRecord(this.typeIndex, startTime, endTime)
				this.feeList = data
				if(data.length === 0){
					uni.showModal({
						title: '注意',
						content: '没有查询到相关缴费记录！'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.f1 {
	//内边距
	padding:$uni-spacing-col-lg*2  $uni-spacing-row-lg;
	.picker-content {
		align-items: center;//弹性容器中的子元素在交叉轴对齐方式：居中
		justify-content: center;//弹性容器中的子元素在主轴上对齐方式：居中
		width: 8em; //宽度
		border: $uni-border;//边框
		border-radius: 40rpx;//边框圆角
		background-color: $uni-bg-color;//背景色
		padding: $uni-spacing-col-base $uni-spacing-row-base;//内边距
		margin-right: $uni-spacing-row-lg;
		text {  //原生微信小程序限制：自定义组件中不能使用标签选择器，但自定义页面中可以
			//右外间距
			margin-right: $uni-spacing-row-base;
		}
	}
}

.card-icon {
	width: 80rpx;
	margin: $uni-spacing-col-base  0;
}
// 样式穿透
::v-deep  .uni-card__content {
	width: 100%;
}
.card-content {
	flex: 1;//弹性容器中的子元素尺寸增长权重	
}
.card-content-list {
	width: 100%;
}
::v-deep .card-content-list-item .uni-list-item__content-title {
	font-size: $uni-font-size-sm;//字体大小
	color: $uni-color-subtitle;//文字颜色
}
</style>
